<template>
    <el-row class="padd20">
        <el-row>
            <el-col class="box box-pack-between btn">
                <span>{{`共${stageList.length}章`}}</span>
                <el-button v-if="maxRole=='team' || maxRole=='admin'|| maxRole=='cmo'" type="primary" class="add" plain
                    size="medium" @click="addChaper">+添加章节</el-button>
            </el-col>
            <el-col class="padd20">
                <ul class="pub">
                    <el-collapse v-model="activeName" accordion>
                        <el-collapse-item v-for="(stage,inx) in stageList" :key="stage.id" :name="stage.id">
                            <template slot="title">
                                <div class="title box box-pack-between box-align-center cp thisdiv">
                                    <div class="box box-pack-start box-align-center">
                                        <span class="num">第{{stage.num}}章</span>
                                        <span class="course-name">{{stage.title}}</span>
                                    </div>
                                    <div class="box box-pack-end box-align-center coprate"
                                        v-if="maxRole=='team' || maxRole=='admin'|| maxRole=='cmo'">
                                        <!-- <div class="box box-pack-start box-align-center mr20"
                                            @click.stop="addSection(stage)">
                                            <el-image src="/static/image/ldkc/icon_kj.png" class="icon mr10"></el-image>
                                            <span class="hover">添加小节</span>
                                        </div>

                                        <div class="box box-pack-start box-align-center mr20"
                                            @click.stop="handleEditStage(stage)">
                                            <el-image src="/static/image/ldkc/icon_kj.png" class="icon mr10"></el-image>
                                            <span class="hover">编辑</span>
                                        </div>

                                        <div class="box box-pack-start box-align-center mr20"
                                            @click.stop="delSatge(stage)">
                                            <el-image src="/static/image/ldkc/icon_kj.png" class="icon mr10"></el-image>
                                            <span class="hover">删除</span>
                                        </div> -->
                                        <el-button type="primary" round size="mini" icon="el-icon-plus"
                                            @click.stop="addSection(stage)">小节</el-button>
                                        <div class="cp more hover ml10 mr20">
                                            <span class="hover">···</span>
                                            <div class="card box box-tb box-align-center box-pack-center">
                                                <span @click.stop="handleEditStage(stage)">编辑</span>
                                                <span @click.stop="delSatge(stage)">删除</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>

                            <el-collapse v-model="activeName2" accordion>
                                <el-collapse-item v-for="(section,si) in stage.sectionList" :key="si" :name="si">
                                    <template slot="title">
                                        <div class="title box box-pack-between box-align-center cp thisdiv"
                                            style="padding-left:30px;">
                                            <div class="box box-pack-start box-align-center">
                                                <span class="num">第{{section.num}}节</span>
                                                <span class="course-name">{{section.title}}</span>
                                            </div>
                                            <div class="box box-pack-end box-align-center coprate"
                                                v-if="maxRole=='team' || maxRole=='admin'|| maxRole=='cmo'">
                                                <div v-if="section.videoNum ==0" class="mr10">
                                                    <el-button type="primary" plain round size="mini"
                                                        icon="el-icon-plus" @click.stop="handleOpenKc(section.id)">课程视频
                                                    </el-button>
                                                </div>
                                                <el-button type="warning" plain round size="mini" icon="el-icon-plus"
                                                    @click.stop="handleOpenDzjc(section.id)">电子教材</el-button>
                                                <el-button type="danger" plain round size="mini" icon="el-icon-plus"
                                                    @click.stop="handleOpenKj(section.id)">课件</el-button>
                                                <div class="cp more hover ml10 mr20">
                                                    <span class="hover">···</span>
                                                    <div class="card box box-tb box-align-center box-pack-center">
                                                        <span @click="handleEditSection(section)">编辑</span>
                                                        <span @click="delSection(section)">删除</span>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </template>
                                    <div class="content box box-tb box-pack-start box-align-start" v-show="true"
                                        v-for="(file,index) in section.files" :key="index" style="padding-left:30px;">
                                        <div class="box box-pack-between box-align-center list">
                                            <div class="box box-pack-start box-align-center">
                                                <el-image v-if="file.fileSuffix=='mp4'" :src="file.videoImg"
                                                    class="img cp" @click="showVideo(file.url)">
                                                </el-image>
                                                <i class="el-icon-video-play cp" v-if="file.fileSuffix=='mp4'"
                                                    @click="showVideo(file.url)"></i>
                                                <el-image src="/static/image/ldkc/pdf.png"
                                                    style="width: 27px;height: 31px;" v-if="file.fileSuffix=='pdf'">
                                                </el-image>
                                                <el-image src="/static/image/ldkc/ppt.png"
                                                    style="width: 27px;height: 31px;"
                                                    v-if="file.fileSuffix=='ppt'||file.fileSuffix=='pptx'"></el-image>
                                                <el-image src="/static/image/ldkc/word.png"
                                                    style="width: 27px;height: 31px;"
                                                    v-if="file.fileSuffix=='doc'||file.fileSuffix=='docx'"></el-image>
                                                <el-image src="/static/image/ldkc/png.png"
                                                    style="width: 27px;height: 31px;"
                                                    v-if="file.fileSuffix=='jpg'||file.fileSuffix=='png'||file.fileSuffix=='jpeg'">
                                                </el-image>
                                                <div class="box box-tb box-pack-start box-align-start padd10 cp"
                                                    @click="file.fileSuffix!='mp4'?showFile(file):showVideo(file.url)">
                                                    <span style="font-size: 16px;">{{file.fileName}}</span>
                                                    <span>{{file.time}}</span>
                                                </div>
                                                <span class="dzjc" v-if="file.type==2">电子教材</span>
                                                <span class="spkc" v-if="file.type==1">视频课程</span>
                                                <span class="kj" v-if="file.type==3">课件</span>
                                            </div>

                                            <span class="padd10 delete cp" @click="clickDelete(section,file)"
                                                v-if="maxRole=='team' || maxRole=='admin'|| maxRole=='cmo'">删除</span>
                                        </div>
                                    </div>
                                    <div v-if="section.files.length==0" style="#9696ab">
                                        暂无数据
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </el-collapse-item>
                    </el-collapse>
                </ul>
            </el-col>
            <el-col style="background-color: #0000FE;">
                <video controls="" autoplay="" name="media" id="video" width="320" height="240" style="display: none;">
                    <source :src="videoUrl" type="video/mp4">
                </video>
            </el-col>
            <el-dialog :visible.sync="videoShow" width="625px" :before-close="handleClose">
                <video :src="videoUrl" controls autoplay></video>
            </el-dialog>

            <!-- 添加章节 -->
            <el-dialog :visible.sync="addChapterSHow" width="625px" @close="closeAddChapter()">
                <div slot="title" class="dialog-title box box-align-center">
                    <i class="title-icon"></i>
                    <span class="title-text ml10">{{tip}}</span>
                </div>
                <el-form ref="lineForm" :model="lineForm" label-width="80px" class="reset-form">
                    <el-form-item :label="`第${stagecnt}章`" prop="chapterName">
                        <el-input v-model="lineForm.chapterName" class="text"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer btn">
                    <el-button class="reset-cancel-btn" @click="closeAddChapter()">取 消</el-button>
                    <el-button class="reset-comfirm-btn" @click="onStageSubmit()">保 存</el-button>
                </span>
            </el-dialog>


            <!-- 添加小节 -->
            <el-dialog :visible.sync="addSectionSHow" width="625px" @close="closeAddSectionSHow()">
                <div slot="title" class="dialog-title box box-align-center">
                    <i class="title-icon"></i>
                    <span class="title-text ml10">添加小节</span>
                </div>
                <el-form ref="lineForm" :model="sectionLineForm" label-width="80px" class="reset-form">
                    <el-form-item :label="`第${sectioncnt}节`" prop="chapterName">
                        <el-input v-model="sectionLineForm.chapterName" class="text"></el-input>
                    </el-form-item>
                    <el-form-item label="小节介绍" prop="info">
                        <el-input type="textarea" placeholder="填写小节介绍" v-model="sectionLineForm.info"></el-input>
                    </el-form-item>
                    <el-form-item label="小节目标" prop="target">
                        <el-input type="textarea" placeholder="填写小节目标" v-model="sectionLineForm.target" class="text">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="小节分数" prop="score">
                        <el-input v-model="sectionLineForm.score" maxlength="2" class="text w50"></el-input>
                        分
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer btn">
                    <el-button class="reset-cancel-btn" @click="closeAddSectionSHow()">取 消</el-button>
                    <el-button class="reset-comfirm-btn" @click="onSectionSubmit()">保 存</el-button>
                </span>
            </el-dialog>


            <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
                <iframe :src="url" frameborder="0" style=" z-index: 1000;height: 800px;width: 100%"></iframe>
            </el-drawer>

        </el-row>
        <addResourse :key="resourceid" :sectionid="sectionid" :jyzid="jyzid" :addtype="addType"
            @listCousSatge="listCousSatge" :dialogVisible="addResourseShow" @clickClose="clickClose()" :title="title"
            ref="child"></addResourse>
        <addKcVideo :key="kcvideoid" :sectionid="sectionid" :jyzid="jyzid" :addtype="addType"
            @listCousSatge="listCousSatge" :dialogVisible="addKcVideoShow" @clickClose="clickVideoClose()"
            :title="title" ref="child2"></addKcVideo>
    </el-row>
</template>

<script>
    import addResourse from './addResourse.vue';
    import addKcVideo from './addKcVideo.vue';
    export default {
        components: {
            addResourse,
            addKcVideo
        },
        props: {
            cousid: {
                type: Number
            },
            jyzid: {
                type: Number
            }
        },
        data() {
            return {
                drawer: false,
                url: '',
                srcList: [],
                stageList: [],
                resourceid: +new Date(),
                kcvideoid: +new Date(),
                stagecnt: 0,
                sectioncnt: 0,
                stageid: 0,
                sectionid: 0,
                activeName: '1',
                activeName2: '1',
                uploadfileurl: this.$url.baseURL + "/comm/uploadVideo",
                style: {
                    height: "69px"
                },
                styleNone: {
                    height: "0px"
                },
                chaperList: [],
                videoShow: false,
                videoUrl: '',
                str: {
                    modlevidel: '',
                    duration: '',
                },
                addChapterSHow: false,
                addSectionSHow: false,
                lineForm: {
                    id: null,
                    chapterName: "",
                    info: "",
                    target: "",
                    score: ''
                },
                sectionLineForm: {
                    id: null,
                    chapterName: "",
                    stageId: 0,
                    info: "",
                    target: "",
                    score: ''
                },
                tip: "添加章节",
                loginInfo: this.$store.state.loginInfo,
                title: "",
                addResourseShow: false,
                addKcVideoShow: false,
                addType: 0, //添加类型  1 课程视频   2 电子教材   3 课件
                maxRole: this.$store.state.maxRole,
            };
        },
        mounted() {
            this.listCousSatge();
            // this.findvideocover()
        },
        methods: {
            listCousSatge() {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.3)'
                });

                this.$api.jyz.listCousSatge({
                    'cousid': this.cousid
                }).then(res => {
                    loading.close();
                    if (res.code == '0') {
                        this.stageList = res.list;
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            // reset(res){
            //     console.log('>>>');
            //     console.log(res.files.map(it => {if(it.fileSuffix == 'mp4'){return true}}));
            //     return res.files.map(it => {if(it.fileSuffix == 'mp4'){return true}})
            // },
            //添加章节
            addChaper() {
                this.lineForm = {};
                this.tip = "添加章节"
                this.addChapterSHow = true;
                this.stagecnt = this.stageList.length + 1;
            },
            //添加章节
            addSection(stage) {
                this.sectionLineForm = {};
                this.tip = "添加小节"
                this.addSectionSHow = true;
                this.sectioncnt = stage.sectionList.length + 1;
                this.sectionLineForm.stageId = stage.id;
            },

            //手风琴显示隐藏
            toogle(index) {
                let arr = this.chaperList
                for (let i = 0; i < arr.length; i++) {
                    var obj = new Object()
                    obj.fileName = arr[i].fileName
                    obj.fileid = arr[i].fileid
                    obj.id = arr[i].id
                    obj.isOpen = index == i ? !arr[i].isOpen : arr[i].isOpen
                    obj.num = arr[i].num
                    obj.time = arr[i].time
                    obj.title = arr[i].title
                    obj.url = arr[i].url
                    obj.videoImg = arr[i].videoImg
                    this.$set(this.chaperList, i, obj)
                }

            },
            //开启video
            showVideo(url) {
                // this.videoShow = true
                // this.videoUrl = url
                window.open(url);
            },
            //查看文件
            showFile(file) {
                // this.drawer = true
                // this.$nextTick(res=>{
                //     this.url = file.url
                // })
                if (file.fileSuffix == 'jpg' || file.fileSuffix == 'jpeg' || file.fileSuffix == 'png') {
                    window.open(file.url);
                } else {
                    window.open("https://view.officeapps.live.com/op/view.aspx?src=" + file.url);
                    /* this.drawer = true
                    this.$nextTick(res => {
                        // this.url = file.url
                        this.url = "https://yhlyy.oss-cn-beijing.aliyuncs.com/E3327262E89D49D8AE7D72890BBFB780%E8%A1%8C%E7%9F%A5%E9%98%85%E8%AF%BB%E6%93%8D%E4%BD%9C%E6%89%8B%E5%86%8C%E6%A1%88%E4%BE%8B-%E3%80%8A%E5%AE%9D%E8%91%AB%E8%8A%A6%E7%9A%84%E7%A7%98%E5%AF%86%E3%80%8B%E5%AF%BC%E8%AF%BB%E8%AF%BE%201.pptx?Expires=4823548894&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=w1mj8M%2FQxUPXugiWc3kTZl0aDm8%3D"
                    }) */
                }
            },
            //删除资源
            clickDelete(item, file) {
                this.$confirm('确认删除【' + file.fileName + '】吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$ajax.post('/ysectionfiles/delete', {
                        sectionid: item.id,
                        fileid: file.fileid
                    }).then(res => {
                        if (res.code == "0") {
                            this.$message({
                                type: 'success',
                                message: '已删除'
                            });
                            this.listCousSatge();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            handleOpenKc(sectionid) {
                this.title = "添加课程视频"
                this.sectionid = sectionid;
                this.$refs.child2.zykList();
                this.addKcVideoShow = true;
                this.addType = 1;
            },
            handleOpenDzjc(sectionid) {
                this.title = "添加电子教材"
                this.sectionid = sectionid;
                this.$refs.child.changeFileType("2");
                this.$refs.child.zykList();
                this.addResourseShow = true;
                this.addType = 2;
            },
            handleOpenKj(sectionid) {
                this.title = "添加课件"
                this.sectionid = sectionid;
                this.$refs.child.changeFileType("3");
                this.$refs.child.zykList();
                this.addResourseShow = true;
                this.addType = 3;
            },
            clickVideoClose() {
                this.addKcVideoShow = false
                this.kcvideoid = +new Date();
            },

            clickClose() {
                this.addResourseShow = false;
                this.resourceid = +new Date();
            },
            //关闭video
            handleClose() {
                this.videoShow = false
                this.videoUrl = ''
            },
            //关闭添加章节弹框
            closeAddChapter() {
                this.addChapterSHow = false
            },
            closeAddSectionSHow() {
                this.addSectionSHow = false
            },
            //编辑章节
            handleEditStage(item) {
                this.tip = "编辑章节";
                this.addChapterSHow = true;
                this.lineForm.id = item.id;
                this.stagecnt = item.num;
                this.lineForm.chapterName = item.title;
            },

            //编辑小节
            handleEditSection(item) {
                this.tip = "编辑小节";
                this.addSectionSHow = true;

                this.sectioncnt = item.num;
                this.sectionLineForm.id = item.id;
                this.sectionLineForm.info = item.info;
                this.sectionLineForm.stageId = item.stageId;
                this.sectionLineForm.target = item.target;
                this.sectionLineForm.score = item.score;
                this.sectionLineForm.chapterName = item.title;
            },
            delSatge(stage) {
                this.$confirm('确认删除【' + stage.title + '】吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$ajax.post('/ycousstage/delete', {
                        stageId: stage.id,
                        cousid: this.cousid
                    }).then(res => {
                        if (res.code == "0") {
                            this.$message({
                                type: 'success',
                                message: '已删除'
                            });
                            this.listCousSatge();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            delSection(section) {
                this.$confirm('确认删除【' + section.title + '】吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$ajax.post('/ysection/delete', {
                        id: section.id
                    }).then(res => {
                        if (res.code == "0") {
                            this.$message({
                                type: 'success',
                                message: '已删除'
                            });
                            this.listCousSatge();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            videoUpload(file) {
                let that = this;

                let fd = new FormData();
                fd.append('file', file.file);
                fd.append('modlevidel', file.data.modlevidel);
                fd.append('duration', file.data.duration);
                console.log(fd.getAll('file'));
                this.$api.jyz.upLoadFile(fd).then(res => {
                    console.log(res)
                })
            },
            handleExceed(files, fileList) {
                this.$message.warning(
                    `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            findvideocover() {
                let _this = this;
                this.$nextTick(() => {
                    let video = document.getElementById("upvideo");
                    let source = document.createElement("source");
                    // source.src = require("../../assets/5b086751dbb7af1ea8fa8d05e66fe5c3.mp4");this.formLabelAlign.video
                    source.src = _this.videoUrl;
                    source.type = "video/mp4";
                    // video.appendChild(source);
                    video.addEventListener("loadeddata", function() {
                        var canvas = document.createElement("canvas");
                        canvas.width = "320";
                        canvas.height = "320";
                        canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.width);
                        var img = document.createElement("img");
                        let imgsrc = canvas.toDataURL("image/png");
                        // _this.Videoframehandle(imgsrc.split(",")[1]);
                        // _this.str.modlevidel = imgsrc.split(",")[1]
                        //console.log(imgsrc);
                        canvas.toBlob(blob => {
                            // 获取文件 blob、file对象都可读取
                            let _this = this;
                            //1:获取file对象
                            var reader = new FileReader();
                            //2:解析对象，转成baae64对象的url
                            reader.addEventListener(
                                "load",
                                function() {
                                    _this.str.modlevidel = reader.result;
                                },
                                false
                            );
                            if (blob) {
                                //在load中返回一个base64编码
                                reader.readAsDataURL(blob);
                            }

                        }, "image/png");
                    });
                });
                //console.log(_this.str.modlevidel);
            },
            // 上传文件前的文件格式、尺寸等等的规则定制
            beforeVideoUpload(file) {
                //console.log(file);
                let _this = this;
                return new Promise(async function(resolve, reject) {
                    let fileName = file.name || "";
                    let ext = fileName.split(".")[fileName.split(".").length - 1];
                    let duration, width, height;
                    if (
                        ext !== "avi" &&
                        ext !== "mp4" &&
                        ext !== "3gp" &&
                        ext !== "mkv" &&
                        ext !== "mpg" &&
                        ext !== "mpeg" &&
                        ext !== "ts" &&
                        ext !== "rmvb" &&
                        ext !== "wmv" &&
                        ext !== "flv" &&
                        ext !== "mov" &&
                        ext !== "png"

                    ) {
                        _this.$message.error(
                            "上传视频应为 avi/mp4/3gp/mkv/mpg/mpeg/ts/rmvb/wmv/flv/mov 格式!"
                        );
                        reject();
                    } else {
                        let video = await _this.loadVideo(file);
                        duration = video.duration;
                        width = video.videoWidth;
                        height = video.videoHeight;
                        video.currentTime = 3 // 第一帧
                        // 获取视频第一帧画面
                        _this.loadVideo(file).then(videoElem => {
                            const canvasElem = document.createElement("canvas");
                            const {
                                videoWidth,
                                videoHeight
                            } = videoElem;
                            canvasElem.width = videoWidth;
                            canvasElem.height = videoHeight;
                            canvasElem
                                .getContext("2d")
                                .drawImage(
                                    videoElem,
                                    0,
                                    0,
                                    videoWidth,
                                    videoHeight
                                );
                            // 导出成blob文件
                            canvasElem.toBlob(blob => {
                                _this.str.modlevidel = JSON.stringify(blob)
                                // 获取文件 blob、file对象都可读取
                                _this.getImage(blob);
                            }, "image/png");
                        });
                    }
                    resolve();
                    _this.str.duration = duration
                    // console.log('1' + _this.str.modlevidel);
                    // console.log('2' + _this.str.duration);
                });
            },
            // 将获取到的第一帧画面文件转为包含一个data:URL格式的字符串（base64编码）代表读取文件的内容。
            getImage(blob) {
                let _this = this;
                //1:获取file对象
                var reader = new FileReader();
                //2:解析对象，转成baae64对象的url
                reader.addEventListener(
                    "load",
                    function() {
                        _this.str.modlevidel = reader.result;
                    },
                    false
                );

                if (blob) {
                    //在load中返回一个base64编码
                    reader.readAsDataURL(blob);
                    //console.log(`3》》》${_this.str.modlevidel}`);
                }
            },
            // 获取视频的尺寸，播放时长
            loadVideo(file) {
                return new Promise(function(resolve, reject) {
                    const videoElem = document.createElement("video");
                    const dataUrl = window.URL.createObjectURL(file);
                    // 当前帧的数据是可用的
                    videoElem.onloadeddata = function() {
                        resolve(videoElem);
                    };
                    videoElem.onerror = function() {
                        reject("video 后台加载失败");
                    };
                    // 设置 auto 预加载数据， 否则会出现截图为黑色图片的情况
                    videoElem.setAttribute("preload", "auto");
                    videoElem.src = dataUrl;
                });
            },

            progress(event) {
                //console.log(event);
                this.showProgress = true;
                this.progInt = parseInt(event.loaded / event.total * 100, 10);
            },
            success(response, file, fileList) {
                //console.log(response);
                //console.log(response.ossFileUrl);
                // this.showProgress = false;
                // localStorage.setItem('url', response.ossFileUrl)
                this.videoUrl = response.ossFileUrl;
                // this.findvideocover();
            },
            beforeUpload(file) {
                //console.log(file);
                const fileName = file.name;
                const index = fileName.lastIndexOf(".");
                const ext = fileName.substr(index + 1);
                const arr = ["mp4"];
                const isOk = arr.includes(ext);
                if (!isOk) {
                    this.$message.warning('格式暂不支持！');
                    return false;
                }
                var url = URL.createObjectURL(file);
                var audioElement = new Audio(url);
                var duration;
                audioElement.addEventListener("loadedmetadata", function(_event) {
                    duration = audioElement.duration; //时长为秒，小数，182.36
                    //console.log(duration);
                });
                var imgSize = file.size / (1024 * 1024);
                if (imgSize > 50) {
                    this.$message.warning(`当前文件${ parseInt(imgSize) }M,上传文件不能超过50M`)
                    return false
                }
            },
            //保存 -- 添加&&编辑
            onStageSubmit() {
                this.$api.jyz.addStage({
                    'id': this.lineForm.id,
                    'cousId': this.cousid,
                    'title': this.lineForm.chapterName,
                    'createUser': this.loginInfo.user.id
                }).then(res => {
                    if (res.code == '0') {
                        this.listCousSatge();
                        this.$message.success('已添加！');
                        this.addChapterSHow = false
                    } else {
                        this.$message.error('操作失败，请检查网络！');
                    }
                })
            },
            //保存 -- 添加&&编辑
            onSectionSubmit() {
                this.$api.jyz.addSection({
                    'id': this.sectionLineForm.id,
                    'cousId': this.cousid,
                    'stageId': this.sectionLineForm.stageId,
                    'title': this.sectionLineForm.chapterName,
                    'createUser': this.loginInfo.user.id,
                    'info': this.sectionLineForm.info,
                    'target': this.sectionLineForm.target,
                    'score': this.sectionLineForm.score
                }).then(res => {
                    if (res.code == '0') {
                        this.listCousSatge();
                        this.$message.success('已添加！');
                        this.addSectionSHow = false
                    } else {
                        this.$message.error('操作失败，请检查网络！');
                    }
                })
            }
        }
    };
</script>

<style scoped lang="scss">
    .pub::-webkit-scrollbar {
        width: 0px;
    }

    //修改样式title
    /deep/ .el-collapse-item__header {
        background-color: #F8F9FC;
        margin-bottom: 5px;
    }

    /deep/ .add.el-button--primary.is-plain {
        color: #626BF1;
        background: #fff;
        border-color: #626BF1;
    }

    /deep/ .add.el-button--primary.is-plain:active {
        background: #626BF1;
        border-color: #626BF1;
        color: #FFF;
        outline: 0;
    }


    /deep/ .add.el-button--primary.is-plain:focus,
    .add.el-button--primary.is-plain:hover {
        background: #626BF1;
        border-color: #626BF1;
        color: #FFF;
    }

    .coprate {
        width: 400px;
    }

    .title {
        width: 100%;
        position: relative;

        .num {
            width: 80px;
        }
    }

    .more {
        width: 73px;
        height: 28px;
        line-height: 28px;
        background: #FFFFFF;
        border: 1px solid #E0DEF6;
        border-radius: 14px;
    }

    .more:hover {
        .card {
            display: flex;
        }
    }

    .card {
        display: none;
        position: absolute;
        top: 20px;
        right: 0;
        width: 92px;
        height: 97px;
        background: #FFFFFF;
        border: 1px solid #D9DBDF;
        box-shadow: 0px 0px 10px 0px rgba(152, 171, 217, 0.31);
        border-radius: 10px;
        z-index: 1000;

        span {
            display: block;
            height: 40px;
            line-height: 40px;
        }
    }

    .content {
        padding: 0 20px;
        position: relative;
        // margin: 5px 5px;
        background-color: #F8F9FC;
        border-radius: 7px;


        .img {
            width: 80px;
            height: 46px;
            border-radius: 10px;
        }

        .el-icon-video-play {
            position: absolute;
            top: 50%;
            left: 62.5px;
            transform: translate(0, -50%);
            color: #fff;
            font-size: 18px;
        }

        .delete {
            color: #EE8892;
        }

        .nodata {
            height: 69px;
        }

    }

    .list {
        width: 100%;
        height: 64px;

        .spkc {
            width: 62px;
            height: 18px;
            line-height: 18px;
            background: #b7b8ff;
            border-radius: 9px 9px 9px 9px;
            color: #5450cf;
            font-size: 12px;
        }

        .kj {
            width: 38px;
            height: 18px;
            line-height: 18px;
            background: #DDF7ED;
            border-radius: 9px 9px 9px 9px;
            color: #4EBE91;
            font-size: 12px;
        }

        .dzjc {
            width: 62px;
            height: 18px;
            line-height: 18px;
            background: #FFEDEA;
            border-radius: 9px 9px 9px 9px;
            color: #CF8277;
            font-size: 12px;
        }
    }

    .icon {
        width: 18px;
        height: 17px;
    }

    // hover:hover {
    //     color: #7F84E4;
    // }

    video {
        width: 100%;
    }

    .thisdiv:hover {
        background: #f1faff;
    }
</style>
